<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		    box-sizing: border-box;
			list-style: none;
		}
		ul{
			display:flex;
			justify-content: center;
			margin-bottom:10px
		}
		li{
			width: 70px;
			height: 70px;
			border: 1px solid #a0913d;
			background: #000;
			color: #a0913d;
			border-radius: 7px;
			text-align:center;
			line-height:70px;
			box-shadow:5px 5px 5px #a0913d;
			margin: 10px 5px;
			transition: .3s;
		}
		/* 高亮样式 */
		.act{
			background-color:#0f0;
			border-color:#0f0;
			color:#333;
		}
		.act1{
			background-color:#ffaaff;
			border-color:#ffaaff;
			color:#333;
		}
	</style>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in word" :class="index<count ? 'act1':''">{{item}}</li>
			</ul>
			<ul v-for='row in keyList'>
				<li v-for="col in row" :class="col == key.toUpperCase()?'act':''">{{col}}</li>
			</ul>
			<h1>{{key}}{{count}}</h1>
			<script src="js/words.js"></script>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						word:['H','e','l','l','o'],
						keyList:[
							['Q','W','E','R','T','Y','U','I','O','P'],
							['A','S','D','F','G','H','J','K','L'],
							['Z','X','C','V','B','N','M']
						],
						key:'',  //当前按下的字母
						count:0  //答对的字母数量  题目的序号下标
					}
				},
				mounted(){//挂在完成2 keydown keyup
					document.addEventListener('keydown',this.keyPress)// 整个文档绑定键盘事件
				},
				methods:{
					keyPress(event){
						this.key=event.key
						if(this.key == this.word[this.count]){ //判断是否输入正确
							this.count++  //正确题号+1
							if(this.count == this.word.length){ //整个单词输入完成
								this.count=0
								//换题目
								let i=Math.floor(Math.random()*words.length)//随机生成题号
								this.word=words[i].split('')
							}
						}
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>